<template>
  
  <div>
    <div class="tabs line-left-right"></div>
    <el-tag
      @click="changeMenu(item)"
      @close="handleClose(item,index)"
      v-for="(item , index) in tags"
      :key="item.path"
      :closable="item.name !== 'Home'"
      :effect="$route.path === item.path ? 'dark' : 'plain'"
      size="small"
      >{{ item.label }}</el-tag
    >
  </div>
</template>
<script>
import { mapState ,mapMutations} from "vuex";
export default {
  name: "CommonTag",
  data() {
    return {};
  },
  computed: {
    ...mapState({
      tags: (state) => state.tab.tabList,
    }),
  },
  methods: {
      ...mapMutations(['closeTag']),
    changeMenu(item) {
      this.$router.push({ path: item.path });
    },
    handleClose(item,index){
        this.closeTag(item)
        const length = this.tags.length
        if(item.name != this.$route.name){
            return
        }
        if(index === length){
            this.$router.push({ path : this.tags[index - 1].path});
        }else{
            this.$router.push({ path : this.tags[index].path});
        }
    }
  },
};
</script>
<style lang="less" scoped>
.el-tag{
    margin-top: 10px;
    margin-left: 10px;
}
.line-left-right {
padding: 0  0;
line-height: 1px;
border-left: 750px solid rgb(221, 221, 221);
border-right: 750px solid rgb(221, 221, 221);
text-align: center;
height: 2px;
}
</style>